<template>
  <div class="sdzz-map-page">
    <el-card>
      <div slot="header" class="clearfix">
        <span>所到之处 - <span v-if="currentLevel==='china'">中国地图</span><span v-else>广西地图</span></span>
        <el-button v-if="currentLevel!=='china'" size="mini" style="float:right;" @click="backToChina">返回中国</el-button>
      </div>
      <div ref="chinaMap" class="map-chart"></div>
    </el-card>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import axios from 'axios';
export default {
  name: 'SdzzView',
  data() {
    return {
      mapChart: null,
      currentLevel: 'china',
      mapDataChina: [
        { name: '广西', value: 5 },
        { name: '云南', value: 3 },
        { name: '浙江', value: 7 },
        { name: '贵州', value: 2 },
      ],
      mapDataGuangxi: [
        { name: '南宁市', value: 3 },
        { name: '桂林市', value: 2 },
        { name: '柳州市', value: 1 },
        { name: '北海市', value: 1 },
        { name: '玉林市', value: 1 },
      ],
      mapDataYunnan: [
        { name: '昆明市', value: 2 },
        { name: '大理白族自治州', value: 1 },
        { name: '丽江市', value: 1 },
        { name: '西双版纳傣族自治州', value: 1 },
        { name: '红河哈尼族彝族自治州', value: 1 },
      ],
      currentProvince: null,
    }
  },
  mounted() {
    this.loadChina();
    window.addEventListener('resize', this.resizeMap);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeMap);
    if (this.mapChart) this.mapChart.dispose();
  },
  methods: {
    loadChina() {
      axios.get('/map/china.json').then(res => {
        echarts.registerMap('china', res.data);
        this.currentLevel = 'china';
        this.currentProvince = null;
        this.renderMap('china', this.mapDataChina, {
          '广西': '广西壮族自治区',
          '云南': '云南省',
          '浙江': '浙江省',
          '贵州': '贵州省'
        });
      });
    },
    loadGuangxi() {
      axios.get('/map/450000.json').then(res => {
        echarts.registerMap('guangxi', res.data);
        this.currentLevel = 'guangxi';
        this.currentProvince = 'guangxi';
        this.renderMap('guangxi', this.mapDataGuangxi);
      });
    },
    loadYunnan() {
      axios.get('/map/530000.json').then(res => {
        echarts.registerMap('yunnan', res.data);
        this.currentLevel = 'yunnan';
        this.currentProvince = 'yunnan';
        this.renderMap('yunnan', this.mapDataYunnan);
      });
    },
    renderMap(mapName, mapData, aliasMap) {
      const geoFeatures = echarts.getMap(mapName).geoJson.features;
      const allNames = geoFeatures.map(f => f.properties.name);
      const dataMap = {};
      (mapData || []).forEach(item => {
        const fullName = aliasMap ? (aliasMap[item.name] || item.name) : item.name;
        dataMap[fullName] = item.value;
      });
      const fullData = allNames.map(name => ({
        name,
        value: dataMap[name] !== undefined ? dataMap[name] : 0
      }));
      this.mapChart = echarts.init(this.$refs.chinaMap);
      this.mapChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: params => `${params.name}<br/>到达次数: ${params.value || 0}`
        },
        visualMap: {
          min: 0,
          max: 20,
          left: 'left',
          top: 'bottom',
          text: ['多','少'],
          inRange: { color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4'] },
          calculable: true
        },
        series: [{
          name: '所到之处',
          type: 'map',
          map: mapName,
          roam: true,
          label: { show: true },
          data: fullData
        }]
      });
      this.mapChart.off('click');
      if (mapName === 'china') {
        this.mapChart.on('click', params => {
          if (params.name === '广西壮族自治区') {
            this.loadGuangxi();
          } else if (params.name === '云南省') {
            this.loadYunnan();
          }
        });
      }
    },
    backToChina() {
      this.loadChina();
    },
    resizeMap() {
      if (this.mapChart) this.mapChart.resize();
    }
  }
}
</script>
<style scoped>
.sdzz-map-page { padding: 30px; }
.map-chart { width: 100%; height: 600px; }
.el-card { box-shadow: 0 2px 6px rgba(74,158,255,0.04) !important; }
</style> 